<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .mask {
            width: 100vw;
            height: 100vh;
            background-color: rgb(0, 0, 0, 0.3);
            position: fixed;
            left: 0;
            top: 0;
            display: none;
        }

        .hint-box {
            width: 500px;
            height: 200px;
            margin: 200px auto;
            background-color: white;
            /* box-shadow: 0 0 10px black; */
            border-radius: 10px;
        }

        .hint-box .header {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            font-size: 30px;
        }

        .header .close {
            color: gray;
            cursor: pointer;
        }

        .hint-box .content {
            text-align: center;
            margin-top: 10px;
            font-size: 30px;
        }
    </style>
</head>
<body>

    <button id="delete">删除</button>
    <button id="login">登录</button>

    <div class="mask">
        <div class="hint-box">
            <div class="header">
                <div class="title">提示</div>
                <div class="close">X</div>
            </div>
            <div class="content">提示内容</div>
        </div>

    </div>

<script>
    function Model() {
        this.mask = document.querySelector(".mask")
        this.content = document.querySelector(".content")
        this.mask.remove()
        this.open = function(msg) {
            this.mask.style.display = "block"
            this.content.innerHTML = msg
        }

        this.close = function() {
            this.mask.style.display = "none"
        }
    }

    let mask = new Model()

    let del_btn = document.querySelector("#delete")
    del_btn.addEventListener("click", function() {
        mask.open("您还未登录，请先登录")
    })

    let login_btn = document.querySelector("#login")
    login_btn.addEventListener("click", function() {
        mask.open("您还未注册，请先注册")
    })

    let close = document.querySelector(".close")
    close.addEventListener("click", function() {
        mask.close()
    })



</script>
    
</body>
</html>